<template>
	<view v-if="plateData!=''">
		<view>
			<image :src="plateData.gcGoods.image" mode="aspectFit"
				style="width: 100%;height: 562rpx;z-index: -1;position: relative;"></image>
			<hx-navbar ref="hxnb" :config="config" style="position: absolute;top: 0;">
				<block slot="right">
					<image @click="collection" v-if="collected == 0"
						style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
						src="../../static/plate/7910.png" mode="aspectFit">
					</image>
					<image @click="collect" v-if="collected == 1"
						style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
						src="../../static/install/8007.png" mode="aspectFit">
					</image>
					<image style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
						src="../../../static/cliend/share.png" mode="aspectFit">
					</image>
				</block>
			</hx-navbar>
		</view>
		<view class="content">
			<view class=" flex justify-between">
				<view>
					<view style="font-size: 44rpx;color: #1E1E1E;line-height: 58rpx;">
						{{plateData.gcGoods.name}}
					</view>
					<view class="flex" style="margin-top: 10rpx;">
						<image style="width:166rpx;height:40rpx;margin-right: 30rpx;" src="../../static/plate/7818.png"
							mode=""></image>
						<image v-if="plateData.gcGoods.environmentalProtection == 0"
							style="width:78rpx;height:32rpx;margin-right: 30rpx;" src="../../static/plate/7816.png"
							mode=""></image>
						<image v-if="plateData.gcGoods.environmentalProtection == 1"
							style="width:78rpx;height:32rpx;margin-right: 30rpx;" src="../../static/plate/8374.png"
							mode=""></image>
						<image v-if="plateData.gcGoods.environmentalProtection == 2"
							style="width:78rpx;height:32rpx;margin-right: 30rpx;" src="../../static/plate/8375.png"
							mode=""></image>
					</view>
					<view class="flex">
						<text class="platform" v-for="(item,index) in label" :key="index">
							{{item}}
						</text>
					</view>
				</view>
				<view class="guide">
					<view
						style="color: rgba(30,30,30,0.8); margin:10rpx;padding:10rpx;background-color: #fff;border-radius: 12rpx 12rpx 0rpx 0rpx;font-size: 22rpx;text-align: center;">
						工厂指导价
					</view>
					<view class="mon" style="font-size: 32rpx; margin:10rpx;">
						￥{{plateData.gcGoods.guidePrice}}
					</view>
					<view class="mon" style="font-size: 22rpx; margin:10rpx;">
						元/m²
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="cont">
			{{plateData.gcGoods.content}}
		</view>
		<!-- 底部 -->
		<view class="shoppingCarts flex ">
			<view class="code" @tap="manufacturer">
				<image style="width: 48rpx;height: 48rpx;" src="../../static/plate/chatCots.png" mode="">
				</image>
				<view>联系厂家</view>
			</view>
			<view class="code" @click="shopCarts">
				<image style="width: 48rpx;height: 48rpx;" src="../../static/plate/shoppingCart.png" mode="">
				</image>
				<view>购物车</view>
			</view>
			<view class="buy" @tap="addshopping()">
				加入购物车
			</view>
			<view class="buy" @tap="shopping()">
				购买
			</view>
		</view>
		<!-- 收藏弹窗 -->
		<uni-popup id="popup" ref="collection" type="bottom" :animation="true">
			<view style="text-align: center;padding: 30rpx;background-color: #ECECECFF;" @click="uncollect">
				取消收藏
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					title: '',
					color: '#fff',
					backgroundColor: [1, 'transparent'],
					border: true,
					rightSlot: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				// 判断是否收藏
				collected: '',
				id: '',
				// 板材列表
				plateData: [],
				label: []
			}
		},
		onLoad(e) {
			this.id = e.id
			this.token = this.$cache.get('token')
		},
		created() {
			this.getFollow()
		},
		methods: {
			// 收藏
			collection() {
				let data = {
					id: this.id,
					collectType: 2,
					status: 1
				}
				this.$api.addCollect(data).then((res) => {
					console.log('添加收藏', res)
					this.getFollow()
				})
			},
			collect() {
				this.$refs.collection.open()
			},
			// 取消收藏
			uncollect() {
				let data = {
					id: this.id,
					collectType: 2,
					status: 0
				}
				this.$api.unCollect(data).then((res) => {
					// console.log('取消收藏', res)
					this.$refs.collection.close()
					this.getFollow()
				})
			},
			// 板材详情
			getFollow() {
				let data = {
					id: this.id
				}
				if (this.token == null) {
					this.$api.unGoodsDetails(data).then((res) => {
						this.plateData = res.data.result;
						this.label = res.data.result.gcGoods.label.split(",")
						this.collected = 0
						// console.log(this.plateData, '哈哈哈哈哈')
					})
				} else {
					this.$api.goodsDetails(data).then((res) => {
						this.plateData = res.data.result;
						this.label = res.data.result.gcGoods.label.split(",")
						this.collected = res.data.result.count
						// console.log(res, '哈哈哈哈哈1')
					})
				}
			},
			goBack() {
				uni.navigateBack()
			},
			details(e) {
				// this.$tools.goPageNoAuth('./designDetails')
			},
			// 前往购物车
			shopCarts() {
				this.$tools.goPageNoAuth('./shoppingCarts')
			},
			// 购买
			shopping(e) {
				this.$tools.goPageNoAuth('/clientEnd/page/shoppingCart/submitAnOrder')
			},
			// 加入购物车
			addshopping() {

			},
			//联系厂家
			manufacturer() {
				console.log(this.plateData, '大的行政村')
				uni.navigateTo({
					url: '../../../pages/information/User-Chat?id=' + this.plateData.id + '&title=' + this
						.plateData
						.name + '&type=' + 2 + '&myName=' + this.$cache.get('name') +
						'&myIcon=' + this.$cache.get('avatar') + '&avatar=' + this.plateData.avatar + '&sendId=' +
						this.plateData.id
				})
			}
		}
	}
</script>

<style scoped>
	#popup {
		border-radius: 15rpx 15rpx 0 0;
		width: 100%;
		background-color: #fff;
	}

	.buy {
		width: 206rpx;
		height: 72rpx;
		font-weight: 500;
		color: #FFFFFF;
		background: #492D22;
		border-radius: 8rpx;
		line-height: 72rpx;
		text-align: center;
		font-size: 32rpx;
		opacity: 1;
	}

	.shoppingCarts {
		width: 100%;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		z-index: -1;
		/* margin: auto 0; */
	}

	.code {
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #1E1E1E;
		line-height: 28rpx;
		/* flex-direction: row; */
		/* align-items: center; */
	}

	.cont {
		padding: 40rpx 30rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
	}

	.mon {
		font-weight: 500;
		text-align: center;
		color: #fff;
		margin: auto 0;
	}

	.content {
		background-color: #fff;
		padding: 30rpx;
	}

	.platform {
		margin: 10rpx 10rpx 10rpx 0;
		padding: 10rpx;
		font-size: 24rpx;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 10rpx;
	}

	.guide {
		width: 166rpx;
		height: 160rpx;
		margin: auto 0;
		background: #F84949;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>